<!-- pc 全局头部 不透明版 无搜索框-->
<template>
  <div>
    <header class="nav-box">
      <ul class="nav-list">
        <li class="nav-item">
          <router-link
            :to="{name:'Home'}"
            title="马蜂窝自由行"
            class="header-logo-item header-item"
            style="border:none"
          >
            <img src="@/assets/header-sprites15_01.png" width="136px" height="39px" />
          </router-link>
        </li>
        <li class="nav-item">
          <router-link :to="{name:'Home'}" title="首页" class="header-item" active-class="active">首页</router-link>
        </li>
        <li class="nav-item">
          <router-link :to="{name:'Destination'}" title="目的地" class="header-item" active-class="active">目的地</router-link>
        </li>

        <li class="nav-item">
          <router-link :to="{name:'TourismStrategy'}" title="旅游攻略" class="header-item" active-class="active">旅游攻略</router-link>
        </li>
        <li class="nav-item drop-down-btn">
          <router-link
            :to="{name:'GoJourney'}"
            title="去旅行"
            class="header-item drop-down"
            active-class="active"
            :class="{'active-1':isKeep}"
          >
            <span>去旅行</span>
            <i class="el-icon-caret-bottom"></i>
          </router-link>

          <ul
            class="drop-down-box animated fadeIn"
            @mouseenter="keepStyle"
            @mouseleave="keepStyleClean"
          >
            <li class="drop-down-item">
              <a href="#" class="item item-tag">自由行</a>
            </li>
            <li class="drop-down-item">
              <a href="#" class="item">跟团游</a>
            </li>
            <li class="drop-down-item">
              <a href="#" class="item">当地游</a>
            </li>
            <li class="drop-down-item">
              <a href="#" class="item">邮轮</a>
            </li>
            <li class="drop-down-item">
              <a href="#" class="item">签证</a>
            </li>
          </ul>
        </li>

        <li class="nav-item">
          <router-link :to="{name:'Tickets'}" title="机票火车票" class="header-item tag" active-class="active">机票火车票</router-link>
        </li>

        <li class="nav-item">
          <router-link :to="{name:'BookHotel'}" title="订酒店" class="header-item" active-class="active">订酒店</router-link>
        </li>

        <li class="nav-item shequ-btn">
          <span class="header-item shequ" :class="{'active-1':isKeepShequ}">
            社区
            <i class="el-icon-caret-bottom"></i>
          </span>

          <ul
            class="drop-down-shequ-box animated fadeIn"
            @mouseenter="keepStyleShequ"
            @mouseleave="keepStyleShequClean"
          >
            <li class="drop-down-left-item">
              <a href="#" class="left-item left-item-tag" style="color:#ff9d00">问答</a>
              <a href="#" class="left-item left-item-tag-1">马蜂窝周边</a>
              <a href="#" class="left-item">蜂首俱乐部</a>
              <a href="#" class="left-item">结伴</a>
            </li>

            <li class="drop-down-right-item">
              <a href="#" class="right-item">小组论坛</a>
              <a href="#" class="right-item">分舵同城</a>
              <a href="#" class="right-item">马蜂窝拍卖行</a>
              <a href="#" class="right-item">照片PK</a>
              <a href="#" class="right-item">真人兽</a>
              <a href="#" class="right-item">道具商店</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <router-link to="#" title="APP" class="header-item">APP</router-link>
        </li>
        <li class="nav-item">
          <router-link to="#" title="APP" class="header-item">
            <img src="@/assets/mfwzx.png" width="75px" height="30px" />
          </router-link>
        </li>

        <li class="nav-item">
          <ul class="login-box">
            <li class="login-item">
              <a href="javascript:;" title="微博登录" class="login-method">
                <i class="fa fa-weibo" aria-hidden="true"></i>
              </a>
            </li>
            <li class="login-item">
              <a href="javascript:;" title="QQ登录" class="login-method">
                <i class="fa fa-qq" aria-hidden="true"></i>
              </a>
            </li>
            <li class="login-item">
              <a href="javascript:;" title="微信登录" class="login-method">
                <i class="fa fa-weixin" aria-hidden="true"></i>
              </a>
            </li>
            <li class="login-item login-btn-box">
              <a href="javascript:;" title="登录马蜂窝" class="login-btn btn">登录</a>
              <span style="color:#c9c9c9" class="fg">|</span>
              <a href="javascript:;" title="注册账号" class="register-btn btn">注册</a>
            </li>
          </ul>
        </li>
      </ul>
    </header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isKeep: false,
      isKeepShequ: false
    };
  },

  components: {},

  methods: {
    keepStyle() {
      this.isKeep = true;
    },
    keepStyleClean() {
      this.isKeep = false;
    },
    keepStyleShequ() {
      this.isKeepShequ = true;
    },
    keepStyleShequClean() {
      this.isKeepShequ = false;
    }
  }
};
</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
.active-1 {
  color: #ff9d00;
}

.item-tag {
  position: relative;

  &:after {
    content: 'hot';
    position: absolute;
    background: #f46240;
    color: #ffffff;
    font-size: 11px;
    padding: 0 4px;
    right: 43px;
    top: 12px;
    line-height: 14px;
  }

  &:before {
    content: '';
    position: absolute;
    border-color: transparent #f46240 transparent transparent;
    border-width: 7px;
    border-style: solid;
    left: 54px;
    top: 12px;
  }
}

.left-item-tag {
  position: relative;

  &:after {
    content: 'hot';
    position: absolute;
    background: #f46240;
    color: #ffffff;
    font-size: 11px;
    padding: 0 4px;
    left: 44px;
    top: 4px;
    line-height: 14px;
  }

  &:before {
    content: '';
    position: absolute;
    border-color: transparent #f46240 transparent transparent;
    border-width: 7px;
    border-style: solid;
    left: 30px;
    top: 4px;
  }
}

.left-item-tag-1 {
  position: relative;

  &:after {
    content: 'new';
    position: absolute;
    background: #1ec896;
    color: #ffffff;
    font-size: 11px;
    padding: 0 4px;
    left: 94px;
    top: 4px;
    line-height: 14px;
  }

  &:before {
    content: '';
    position: absolute;
    border-color: transparent #1ec896 transparent transparent;
    border-width: 7px;
    border-style: solid;
    left: 80px;
    top: 4px;
  }
}

.nav-box {
  background-color: #ffffff;
  width: 100%;
  color: #333;

  .nav-list {
    display: flex;
    align-items: center;
    width: 66%;
    margin: 0 auto;

    @media screen and (max-width: 1280px) {
      width: 100%;
    }

    .drop-down-btn {
      &:hover {
        .drop-down-box {
          display: block;
        }
      }
    }

    .shequ-btn {
      &:hover {
        .drop-down-shequ-box {
          display: flex;
        }
      }
    }

    .nav-item {
      height: 68px;

      // .header-logo-item
      @media screen and (max-width: 1800px) {
        margin: 0 auto;
      }

      .header-item {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 16px;
        border-bottom: 2px solid transparent;
        box-sizing: border-box;

        @media screen and (max-width: 1800px) {
          padding: 0 5px;
        }

        &:hover {
          color: #ff9d00;
          border-bottom: 2px solid #ff9d00;
          box-sizing: border-box;
        }
      }

      .drop-down {
        border-top: 2px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        position: relative;

        &:hover {
          border-bottom: 2px solid transparent;
          border-top: 2px solid #ff9d00;
          border-left: 1px solid #efefef;
          border-right: 1px solid #efefef;
          box-sizing: border-box;
        }
      }

      .drop-down-box {
        display: none;
        background: rgba(255, 255, 255, 0.95);
        font-size: 14px;
        padding-bottom: 10px;
        color: #666;
        width: 138px;
        position: absolute;
        z-index 20

        @media screen and (max-width: 1800px) {
          width: 137px;
        }

        .drop-down-item {
          &:hover {
            background: rgba(238, 238, 238, 0.95);
          }

          .item {
            display: block;
            padding: 10px 15px;
          }
        }
      }

      .tag {
        position: relative;

        &:after {
          content: '特价';
          position: absolute;
          right: -10px;
          top: 9px;
          background: -webkit-linear-gradient(135deg, rgba(255, 74, 74, 1) 0, rgba(255, 115, 115, 1) 100%);
          color: #ffffff;
          font-weight: bold;
          font-size: 11px;
          border-radius: 4px 0 4px 0;
          padding: 0 4px;
        }
      }

      .active {
        color: #ffffff;
        background-color: #ff9d00;

        &:hover {
          color: #ffffff;
        }
      }

      .login-box {
        color: #ff9d00;
        display: flex;
        align-items: center;
        height: 100%;
        margin-left: 100px;

        @media screen and (max-width: 1800px) {
          margin-left: 20px;
        }

        .login-item {
          margin: 0 3px;

          .login-method {
            border: 1px solid #ff9d00;
            border-radius: 50%;
            display: block;
            width: 26px;
            height: 26px;
            text-align: center;
            line-height: 26px;

            &:hover {
              background-color: #ff9d00;

              i {
                color: #ffffff;
              }
            }
          }
        }

        .login-btn-box {
          margin-left: 20px;

          @media screen and (max-width: 1800px) {
            margin-left: 5px;
          }

          .fg {
            @media screen and (max-width: 1800px) {
              display: none;
            }
          }

          .btn {
            font-size: 14px;
            &:hover{
              text-decoration underline
            }
          }
        }
      }

      .shequ {
        cursor: default;
        border-top: 2px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        position: relative;

        &:hover {
          border-bottom: 2px solid transparent;
          border-top: 2px solid #ff9d00;
          border-left: 1px solid #efefef;
          border-right: 1px solid #efefef;
          box-sizing: border-box;
        }
      }

      .drop-down-shequ-box {
        display: none;
        position: absolute;
        background: rgba(255, 255, 255, 0.95);
        padding: 20px 0px 20px 15px;
        z-index 20

        .drop-down-left-item, .drop-down-right-item {
          display: flex;
          flex-direction: column;
        }

        .drop-down-left-item {
          .left-item {
            margin: 30px 0px;

            &:hover {
              color: #ff9d00;
            }
          }
        }

        .drop-down-right-item {
          .right-item {
            margin: 12px 70px;
            font-size: 13px;

            &:hover {
              color: #ff9d00;
            }
          }
        }
      }
    }
  }
}
</style>